<template>
	<view class="j-p-p-i">
		<view class="j-p-p-i-s"><u-message-input :maxlength="6" :dot-fill="true" mode="bottomLine" v-model="params.transPassword"></u-message-input></view>
		<u-keyboard
			ref="uKeyboard"
			mode="number"
			:dot-enabled="false"
			:show-tips="false"
			:mask="false"
			:mask-close-able="false"
			:cancel-btn="false"
			:confirm-btn="false"
			v-model="isShowKeyboard"
			@change="valChange"
			@backspace="backspace"
		></u-keyboard>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShowKeyboard: false,
			params: {
				transPassword: ''
			}
		};
	},
	mounted() {
		this.isShowKeyboard = true;
	},
	onNavigationBarButtonTap() {
		// 设置交易密码
		this.postUpdateTransPassword();
	},
	methods: {
		// 设置交易密码
		postUpdateTransPassword(){
			
			// 判断验证码是否为空
			if (this.params.transPassword.length < 6) {
				this.$refs.uToast.show({
					title: '请输入交易密码'
				});
				return false;
			}
			
			this.$u.api
				.postUpdateTransPassword(this.params)
				.then(res => {
					console.log(res);
					this.$refs.uToast.show({
						title: '设置交易密码成功'
					});
					setTimeout(()=>{
						uni.navigateBack({
							delta: 2
						})
					},500)
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 按键被点击(点击退格键不会触发此事件)
		valChange(val) {
			// 将每次按键的值拼接到value变量中，注意+=写法
			this.params.transPassword += val;
		},
		// 退格键被点击
		backspace() {
			// 删除value的最后一个字符
			if (this.params.transPassword.length)this.params.transPassword = this.params.transPassword.substr(0, this.params.transPassword.length - 1);
		}
	}
};
</script>

<style>
page {
	background-color: #f3f3f3;
}
</style>
<style scoped lang="scss">
.j-p-p-i {
	.j-p-p-i-s {
		margin-top: 100rpx;
	}
}
</style>
